<template>
	<view class="exam">
    <view class="title">【{{typeText}}】{{item.title}}</view>
    <view class="opts">
      <view @click="select(index)" v-for="(optText, index) in item.opts" :key="index">
        <view class="opt-icon" 
          :class="{active: selected.includes(index)}">{{indexMap[index]}}</view>
        <view class="opt-text">{{ optText }}</view>
      </view>
    </view>
    <view class="ans" v-if="status != 0">
      【答案】{{answer(item.ans)}}
      <text :class="{right: status == 1, wrong: status == -1}">您选择 {{answer(selected)}} 
        <i class="iconfont" :class="{'icon-qiyong': status == 1, 'icon-zhongduan': status == -1}"></i>
      </text>
    </view>
    <view class="ana" v-if="status != 0">
      【解析】{{item.ana}}
    </view>
    <view class="operate">
      <!-- 操作按钮 -->
      <button type="default" 
        v-if="isMchoose"
        v-show="this.selected.length != 0 && this.status == 0"
        @click="confirm">确认</button>
    </view>
  </view>
</template>

<script>
  const TYPE_MAP = {
    1: "单选题",
    2: "多选题",
    3: "判断题"
  }
  const INDEX_MAP = ['A','B','C','D','E','F']
	export default {
		data() {
			return {
        indexMap: INDEX_MAP,
        selected: [],
        status: 0, // 0 未选 1正确 -1 错误
        typeTxet: '单选题',
        
			};
		},
    props:{
      item: Object
    },
    methods:{
      answer(arr){
        let s = ''
        for(let x of arr) s += INDEX_MAP[x] + ' '
        return s
      },
      select(index) {
        // 完成 就不允许点击
        if(this.status !== 0) return null
        if(this.selected.includes(index)){
          this.selected.splice(this.selected.indexOf(index), 1)
        }else{
          this.selected.push(index)
        }
        // 如果是单选题，点击一个既完成选择
        if(this.item.type != 2)
          this.confirm()
      },
      confirm(){
        // 此题答完 判断正误
        if(this.item.ans.sort().toString() == this.selected.sort().toString()){
          this.status = 1
        }else{
          this.status = -1
        }
        // 传数据给父元素 （正确否，选的啥）
        this.$emit('confirm', this.status == 1, this.selected)
      }
    },
    computed: {
      isMchoose(){
        return this.item.type == 2
      },
      typeText(){
        return TYPE_MAP[this.item.type]
      }
      
    }
	}
</script>

<style scoped>

.exam{
  padding: 35rpx 25rpx 0 25rpx;
  font-size: 30rpx;
  /*设置内边距不撑开外框 */
  box-sizing: border-box;
}
.exam .title {
  line-height: 40rpx;
  margin-bottom: 30rpx;
}
.opts>view {
  display: flex;
  width: auto;
  font-size: 28rpx;
  line-height: 40rpx;
  margin-top:30rpx;
  padding-left: 20rpx;
  align-items: center;
}
.opt-icon {
  width:45rpx;
  height:45rpx;
  border:1px solid rgba(200,200,200,1);
  border-radius:50%;
  line-height: 45rpx;
  text-align: center;
  margin-right: 20rpx;
}
.opts .active{
  color: #ffffff;
	background-color: #d5ac88;
}

.opt-text{
  flex: 1;
  color: #333333;
}
.ans, .ana{
  margin-top: 30rpx;
}
.ans>i{
  font-size: 35rpx;
}
.right { color: #00aa00;}
.wrong { color: red;}
.operate{
  position: absolute;
  width: 700rpx;
  bottom: 15rpx;
}
</style>
